﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0">
    <meta content="telephone=no" name="format-detection" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>知识库-用户中心</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/mobiscroll.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/media.css">

<!--     <link rel="stylesheet" type="text/css" href = "css/iscroll.css"> -->
    <style type="text/css" media="screen">
        [v-cloak] {
          display: none;
        } 
        html{ background-color: #fff; }   
    </style>
</head>
<body id="app">
    <!-- 头部 -->
    <header class="header">
        <a href="javascript:;" title="返回" class="icon back" @click="back();"></a>
        <h1 v-cloak>{{ title }}</h1>
    </header>

    <div id="wrapper">
        <div id="scroller">
            <div id="scroller-pullDown">
                  <span id="down-icon" class="icon-double-angle-down pull-down-icon"></span>
                  <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>     
            </div>
            <section class="padT23 padB23 chatView">
                <div :class="userInfo.uid == info.uid ? 'pad24 chatMyself' : 'pad24 chatOthers'" v-for="info in data">
                    <div class="content clearfix">
                        <span class="db pad24">
                            <img :src="info.headPic">
                        </span>
                        <div>
                            <p class="mar24 context clearfix" v-show="!info.comment==''">
                                <span class="pad24">{{info.comment}}</span>
                                <i @click="reAddReplyComment($event,1,info.timestamp)" v-show="!info.error_code==0" class="reSubmit"></i>
                            </p>
                            <p class="mar24 context clearfix" v-show="!info.commentPicture==''">
                                <img v-bind:src = info.commentPicture>
                                <i @click="reAddReplyComment($event,2,info.timestamp)" v-show="!info.error_code==0" class="reSubmit"></i>
                            </p>
                        </div>
                        
                    </div>
                    <small class="time font18 db">{{info.commentDate}}</small>
                </div>
            </section>
        </div>
    </div>


    <footer class="clearfix footer chatView">
        <!-- <form  id="am_form" method="post" enctype="multipart/form-data">
            <i href="javascript:void(0);" title="用户中心" class="icon userIcon" @click="selectPic();"></i>
            <input type='file' class="dn" id="pic" name="pic">
        </form> -->
        <div class="clearfix chat-box">
            <input type="text" id="searchword" class="chat-txt" placeholder="请输入" value="" maxlength="30">
        </div>
    </footer>


    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="js/lib/vue.js"></script>
    <script type="text/javascript" src="js/lib/global.js"></script>
    <script type="text/javascript" src="js/lib/mobiscroll.js"></script>
    <script type="text/javascript" src="js/scrollbar.js"></script>
    <script type="text/javascript" src="js/lib/alert.js"></script>
    <script type="text/javascript" src="js/lib/common.js"></script>
    <script type="text/javascript" src="js/chatView.js"></script>
    <script type="text/javascript" src="js/lib/jquery.form.js"></script>

    <script type="text/javascript" src="js/iscroll/iscroll2.js"></script>

    <script type="text/javascript">
        $('#searchword').bind('keypress',function(event){
            if(event.keyCode == "13")    {
                vm.addReplyComment();
            }
        });

        function loaded () {
            var myScroll,
                upIcon = $("#up-icon"),
                downIcon = $("#down-icon"),
                distance = 30; //滑动距离

            myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });

            myScroll.on("scroll",function(){
                var y = this.y,
                    maxY = this.maxScrollY - y,
                    downHasClass = downIcon.hasClass("reverse_icon"),
                    upHasClass = upIcon.hasClass("reverse_icon");

                if(y >= distance){
                    !downHasClass && downIcon.addClass("reverse_icon");
                    return "";
                }else if(y < distance && y > 0){
                    downHasClass && downIcon.removeClass("reverse_icon");
                    return "";
                }

                if(maxY >= distance){
                    !upHasClass && upIcon.addClass("reverse_icon");
                    return "";
                }else if(maxY < distance && maxY >=0){
                    upHasClass && upIcon.removeClass("reverse_icon");
                    return "";
                }
            });
            function upAjax(){
                
            }

            function downAjax(){
                
            }
            // 下拉刷新事件
            myScroll.on("slideDown",function(){
                if(this.y > distance){
                    //downAjax();
                    upIcon.removeClass("reverse_icon");
                }
            });
            // 上拉滑动事件
            myScroll.on("slideUp",function(){
                if(this.maxScrollY - this.y > distance){
                    //upAjax();
                    upIcon.removeClass("reverse_icon");
                }
            });
        }
        //loaded ();

    window.onload = function(){  
        // 选择图片  
        document.getElementById('pic').onchange = function (e) {
            event = e || event;
            var img = event.target.files[0];  
            // 判断是否图片  
            if(!img){  
                return ;  
            }  
            // 判断图片格式  
            if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){  
                alert('图片只能是jpg,gif,png');  
                return ;  
            }
            //定义图片参数
            var uploadFile = new FormData();
            uploadFile.append("uploadFile", img);
            //var uploadFile = new FormData(img);

            //接口方面的更新，现在上传图片必须得有accessToken等
            getaccessToken(function (token) {

                var url = 'ask_getFolderId';
                Common.ajaxCall({
                    url: url,
                    datatype: 'json',
                    type: 'post'
                }, function (data) {
                    if (data.error_code == 0) {
                        uploadFile.append("folderId", data.data[0].folderId);
                        uploadFile.append("accessToken", token);
                        //uploadFile.append("tags", _self.title);

                        //data = Common.jsonEncode(data);
                        Common.ajaxSubmitPic({
                            url: 'upload_file',
                            data: uploadFile,
                        }, function (data) {
                            if (data.error_code == 0) {
                                var image = data.data[0].content;
                                vm.addReplyPic(image);
                            } else {
                                alert(data.msg);
                            }
                        });
                    } else {
                        alert(data.msg);
                    }
                });
            });
            //var data = {
            //};
            //data = Common.jsonEncode(data);
            //Common.ajaxSubmit({target:"#am_form", url: 'common_uploadPic', datatype: 'json', type: 'get', data: data}, function (data) {
            //    if(data.error_code==0){
            //        var image = data.msg;
            //        vm.addReplyPic(image);
            //    }else{
            //        alert(data.msg);
            //    }
            //});
        }
    }  

    </script>
</body>
</html>
